为了账号安全,请及时绑定邮箱和手机立即绑定

Web Components系列(一) —— 概述

标签:
Html5 JavaScript

前言

如果我们选择不使用任何框架的情况下来进行前端开发,那么针对一个完整的网页,我们需要开发以下代码:

  • HTML 代码
  • CSS 代码
  • JavaScript 代码

就几年之前来说,HTML 部分的代码基本不存在复用的可能,这就导致我们可能需要开发大量重复的 HTML 代码,即使使用 CV 法,代码的冗余却是不可避免的。

Web Components 诞生的背景

近几年,我们在使用前端框架(比如 Vue)时,都知道有个“组件”的概念,通过使用组件可以提高代码复用率,一次创建多处使用,在一定程度上简化了开发流程。

既然组件化开发这么流行,又能给开发带来极大的便利,那么浏览器就当然有理由来原生支持组件化,Web Components 就应运而生,它的诞生使得浏览器有了原生支持组件化的能力。

img

Web Components 的概念

何为 Web Components ?顾名思义,就是“网页组件”,引用 MDN 上的话来说就是:

Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web 应用中使用它们。

注意其中的关键词:可重用、定制,这也是我们乐于使用第三方框架中组件功能的理由。

Web Components 的组成

Web Components不是单一的规范,而是一系列的技术组成,包括Custom Element、Shadow DOM、HTML templates 三种技术规范。它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。

Custom elements(自定义元素)

一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。

Shadow DOM(影子DOM)

一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。

HTML templates(HTML模板)

<templete><slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

Web Components 的兼容性

兼容性是检验一项技术能否用于生产环境的标准,我们来看一下 Web Components 各项技术的兼容性:

image-20220206221625474

image-20220206222054931

image-20220206222122783

通过上图可以看到,Web Components 在主流浏览器上的支持已经极其良好,如果对向下兼容要求不严格的话,完全可以在生产环境中使用了。

总结

技术的发展总是以“提供便利”为方向的,Web Components 的出现可以说是前端技术发展的必然结果,而我们需要做的就是想办法善用它为自己服务。

~
本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
84

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消